<template>
	<view>
		<view class="head tn-gradient-bg__cool-2 tn-shadow-md">
			<view class="head-draw" />
			<view class="head-user">
				<view class="tn-p flex-align-center">
					<view class="flex-1 flex-x flex-align-center">
						<uv-avatar size="110rpx" :src="userinfo.headimg" />
						<view class="tn-ml-sm tn-white_text">
							<view class="tn-text tn-mb-sm flex-x">
								<text class="tn-text-bold tn-mr-sm">{{ userinfo.nickname }}</text>
								<uv-tags plain size="mini" shape="circle" type="warning" @click="goto.userUpgrade()"
									:text="relation?.level_name || '未知'" />
							</view>
							<uv-text v-if="userinfo.phone" format="encrypt" mode="phone" :text="userinfo.phone"
								:call="false" color="#FFF" size="28rpx" />
							<view v-else class="tn-text-sm">未绑定手机号</view>
						</view>
					</view>
					<view class="relative flex-x" style="right:0;top:-30rpx">
						<view class="tn-ml-sm">
							<uv-icon size="40rpx" color="#fff" name="volume" />
						</view>
						<view class="tn-ml-sm">
							<uv-icon size="40rpx" color="#fff" name="more-circle" />
						</view>
						<view class="tn-ml-sm">
							<uv-icon size="40rpx" color="#fff" name="setting" @click="goto.href('/pages/user/setting')" />
						</view>
					</view>
				</view>
				<view class="flex-x tn-mt tn-pb-sm" v-if="userinfo.extra">
					<view class="flex-y flex-center" @click="goto.userBalance()">
						<uv-count-to :endVal="userinfo.extra.balance_usable" :bold="true" color="#fff" font-size="35rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">余额</view>
					</view>
					<view class="flex-y flex-center" @click="goto.userIntegral()">
						<uv-count-to :endVal="userinfo.extra.integral_usable" :bold="true" color="#fff" font-size="35rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">积分</view>
					</view>
					<view class="flex-y flex-center" @click="goto.userHistory()">
						<uv-count-to :endVal="userinfo.extra.history_total" :bold="true" color="#fff" font-size="35rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">足迹</view>
					</view>
					<view class="flex-y flex-center" @click="goto.userCollect()">
						<uv-count-to :endVal="userinfo.extra.collect_total" :bold="true" color="#fff" font-size="35rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">收藏</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tn-p-sm">

			<view class="ta-card">
				<view class="ta-card-head">
					<text class="tn-text-sm tn-text-bold">我的订单</text>
					<view class="tn-text-sm flex-x" @click="goto.order(0)">
						<text class="tn-mr-xs">全部订单</text>
						<uv-icon name="arrow-right" size="24rpx" color="#999" />
					</view>
				</view>
				<view class="flex-x">
					<view class="flex-y flex-center tn-p tn-pb-sm" v-for="(x, i) in orders" :key="i" @click="goto.order(i)">
						<uv-count-to :endVal="x.nums" color="#f00" font-size="40rpx" />
						<view class="tn-text-xs ta-desc-text nowrap">{{ x.name }}</view>
					</view>
				</view>
			</view>


			<view class="ta-card">
				<view class="ta-card-head">
					<text class="tn-text-sm tn-text-bold">我的服务</text>
				</view>
				<view class="ta-card-foot flex-x-between" @click="goto.userUpgrade()">
					<view class="tn-text-sm flex-1">我的权益</view>
					<uv-icon name="arrow-right" size="24rpx" color="#999" />
				</view>
				<view class="ta-card-foot flex-x-between" @click="goto.userPoster()">
					<view class="tn-text-sm flex-1">我的海报</view>
					<uv-icon name="arrow-right" size="24rpx" color="#999" />
				</view>
				<view class="ta-card-foot flex-x-between" @click="goto.userSpread()">
					<view class="tn-text-sm flex-1">我的推广</view>
					<uv-icon name="arrow-right" size="24rpx" color="#999" />
				</view>
				<view class="ta-card-foot flex-x-between" @click="goto.userRebate()">
					<view class="tn-text-sm flex-1">我的返利</view>
					<uv-icon name="arrow-right" size="24rpx" color="#999" />
				</view>
				<view class="ta-card-foot flex-x-between" @click="goto.addrList()">
					<view class="tn-text-sm flex-1">收货地址</view>
					<uv-icon name="arrow-right" size="24rpx" color="#999" />
				</view>
			</view>

		</view>
	</view>
</template>

<style lang="scss">
.head {
	overflow: hidden;
	position: relative;

	&-draw {
		width: 750rpx;
		height: 100rpx;
		z-index: 1;
		position: absolute;

		&,
		&::after,
		&::before {
			top: 0;
			left: -100rpx;
			width: 120%;
			content: "";
			display: block;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.05);
			border-bottom-left-radius: 80%;
			border-bottom-right-radius: 80%;
		}

		&::after {
			height: 150rpx;
		}

		&::before {
			height: 190rpx;
		}
	}

	&-user {
		z-index: 2;
		position: relative;
	}
}
</style>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaUseAccount, TaDataBase, TaDataOrder } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			orders: TaDataOrder.types()
		}
	},
	created() {
		TaDataBase.page('个人中心', true)
	},
	onShow() {
		this.loadData();
		uni.stopPullDownRefresh()
	},
	onPullDownRefresh() {
		this.loadData()
		this.orders = TaDataOrder.types()
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 加载数据
		loadData() {
			// 加载订单数量统计
			TaDataOrder.total().then((ret: any) => this.orders.forEach((x: any) => {
				x.nums = 0
				x.stat.split(',').forEach((y: any) => {
					for (let i in ret.data) i.indexOf(y) > -1 && (x.nums += ret.data[i])
				})
			}))
		}
	}
})
</script>